<template>
    <div>
        <a-modal
            :title="title"
            :visible="visible"
            :confirm-loading="loading"
            :cancelText="cancelText"
            :okText="okText"
            :width="width"
            @ok="onClickSave"
            @cancel="onClickCancel"
        >
            <slot></slot>
            <template slot="footer">
                <a-button @click="onClickCancel">
                    {{ cancelText }}
                </a-button>
                <a-button type="primary" @click="onClickSave">
                    {{ okText }}
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: 'Modal',
    props: {
        title: {
            type: String,
            default: ''
        },
        visible: {
            type: Boolean,
            default: false
        },
        width: {
            type: String,
            default: '500px'
        },
        cancelText: {
            type: String,
            default: '取消'
        },
        okText: {
            type: String,
            default: '确认'
        },
        footer: {
            type: Boolean,
            default: true
        },
        cancel: {
            type: Function,
            default: async () => {}
        },
        ok: {
            type: Function,
            default: async () => {}
        }
    },
    data() {
        return {
            loading: false
        }
    },
    methods: {
        async onClickCancel() {
            this.$emit('update:visible', false)
            this.$emit('change', false)
            await this.cancel()
        },
        async onClickSave() {
            this.loading = true
            this.ok().then(res => {
                this.loading = false
                this.$emit('update:visible', false)
                this.$emit('change', false)
            }).catch(res => {
                this.loading = false
            })
        }
    }
}
</script>

<style scoped>

</style>
